﻿@model Sheng.WeixinConstruction.Management.Shell.Models.PictureVoteDetailViewModel

@{
    ViewBag.MainMenu = "Campaign";
    ViewBag.LeftMenu = "PictureVote";

    ViewBag.Title = "投票";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript" src="/Scripts/laydate/laydate.js"></script>
<script type="text/javascript" src="/Scripts/echarts.min.js"></script>

<script>

    var _id = getQueryString("id");

    $(document).ready(function () {
        if (_online == false)
            return;

        loadDataAnalyse();

    });

    function changePage(url) {
        window.location.href = url + "?id=" + _id;
    }

    function removeData() {
        if (_id == undefined || _id == "") {
            return;
        }

        var msg = "是否确认删除该活动？"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function () {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Campaign/RemovePictureVote?id=" + _id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR) {
                    layer.close(loadLayerIndex);
                    if (data.Success) {
                        window.location.href = "/Campaign/PictureVote_Ongoing";
                    } else {
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest) {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function endCampaign() {
        if (_id == undefined || _id == "") {
            return;
        }

        var msg = "是否确认结束该活动？"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function () {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Campaign/EndCampaign?id=" + _id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR) {
                    if (data.Success) {
                        if (data.Data == 0) {
                            window.location.reload();
                        }
                        else {
                            layer.close(loadLayerIndex);
                            switch (data.Data) {
                                case 1:
                                    layerAlert("此活动已经是结束过的活动。");
                                case 2:
                                    layerAlert("此活动还没有开始。");
                                default:
                                    layerAlert("开始失败");
                            }
                        }

                    } else {
                        layer.close(loadLayerIndex);
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest) {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function openNewItem() {
        if (_id == undefined || _id == "") {
            return;
        }

        var msg = "是否确认打开参与通道？"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function () {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Campaign/OpenPictureVoteNewItem?id=" + _id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR) {
                    if (data.Success) {
                        window.location.reload();

                    } else {
                        layer.close(loadLayerIndex);
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest) {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function closeNewItem() {
        if (_id == undefined || _id == "") {
            return;
        }

        var msg = "是否确认关闭参与通道？关闭后会员将不可再上传照片，但是可以对当前项目进行投票。"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function () {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Campaign/ClosePictureVoteNewItem?id=" + _id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR) {
                    if (data.Success) {
                        window.location.reload();

                    } else {
                        layer.close(loadLayerIndex);
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest) {
                    layer.close(loadLayerIndex);
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function loadDataAnalyse() {
        @if (Model.CampaignBundle.Campaign.StartTime.HasValue == false)
        {
            <text>
        layerAlert("活动尚未开始。");
        return;
        </text>
        }

        if ($("#txtStartDate").val() == "") {
            $("#txtStartDate").val('@Model.CampaignBundle.Campaign.StartTime.Value.AddDays(-1).ToString("yyyy-MM-dd")');
        }

        if ($("#txtEndDate").val() == "") {
            @if (Model.CampaignBundle.Campaign.EndTime.HasValue)
            {
                @:$("#txtEndDate").val('@Model.CampaignBundle.Campaign.EndTime.Value.ToString("yyyy-MM-dd")');
                                                                        }
            else
            {
                @:$("#txtEndDate").val((new Date()).format("yyyy-MM-dd"));
                                                                        }
        }

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var args = new Object();
        args.CampaignId = _id;
        args.StartDate = $("#txtStartDate").val();
        args.EndDate = $("#txtEndDate").val();

        $.ajax({
            url: "/Api/Campaign/GetPictureVoteDataAnalyse",
            type: "POST",
            dataType: "json",
            data: JSON.stringify(args),
            success: function (data, status, jqXHR) {
                //   alert(JSON.stringify(data));

                layer.close(loadLayerIndex);
                if (data.Success) {
                    showDayChart(data.Data);
                    showApproveStatusChart(data.Data);
                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function showDayChart(data) {
        var categoryArray = new Array();
        $.each(data.DayUpload, function (idx, obj) {
            categoryArray[idx] = obj.Date;
        });

        var dayUploadArray = new Array();
        $.each(data.DayUpload, function (idx, obj) {
            dayUploadArray[idx] = obj.TotalCount;
        });

        var dayVoteArray = new Array();
        $.each(data.DayVote, function (idx, obj) {
            dayVoteArray[idx] = obj.TotalCount;
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('dayChart'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '上传与投票量',
                subtext: '指定时间段内每日的上传数量与投票数量'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['上传量', '投票量']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {},
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: categoryArray
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                }
            ],
            series: [
                {
                    name: '上传量',
                    type: 'line',
                    data: dayUploadArray

                },
                {
                    name: '投票量',
                    type: 'line',
                    data: dayVoteArray

                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function showApproveStatusChart(data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('approveStatusChart'));

        // 指定图表的配置项和数据
        option = {
            title: {
                text: '审核状态',
                subtext: '当前所有投票项目的审核状态'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {

                data: ['已审核', '未审核']
            },
            series: [
                {
                    name: '审核状态',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value: data.ApprovedCount, name: '已审核' },
                        { value: data.WaitingCount, name: '未审核' }
                    ]
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

</script>

<div style="margin-top: 25px; margin-left: 10px;" class="font_black_24">
    @Model.CampaignBundle.Campaign.Name
</div>

<div style="margin-top: 30px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="td_ContentTab_active" style="width: 150px;">摘要</td>
            <td class="td_ContentTab" style="width: 150px;"><a href="javascript:void(0)" class="a_black_16" onclick="changePage('/Campaign/PictureVoteItemList')">投票内容</a></td>
            <td align="right">
                &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="4" bgcolor="#EEEEEE" height="2"></td>
        </tr>
    </table>
</div>

<div style="margin-left: 20px; margin-right: 20px; margin-top: 10px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td valign="top">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 20px;">
                    <tr>
                        <td width="50%" height="36" valign="top">创建时间：@Model.CampaignBundle.Campaign.CreateTime</td>
                        <td width="50%" valign="top">
                            @if (Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.Ongoing)
                            {
                                @:参与通道：
                        if (Model.CampaignBundle.PictureVote.AllowedNewItem)
                        {
                            @:打开
                            }
                        else
                        {
                            @:关闭
                            }
                            }
                        </td>
                    </tr>
                    <tr>
                        <td width="50%" height="36" valign="top">开始时间：@Model.CampaignBundle.Campaign.StartTime</td>
                        <td width="50%" valign="top">
                            @if (Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.End)
                            {
                                @:结束时间：@Model.CampaignBundle.Campaign.EndTime
                            }
                        </td>
                    </tr>
                    <tr>
                        <td height="36" valign="top">创建者：@Model.CampaignBundle.Campaign.CreateUserName</td>
                        <td valign="top">
                            仅关注者可参与：
                            @if (Model.CampaignBundle.Campaign.OnlyMember)
                            {
                                @:是
                            }
                            else
                            {
                                @:否
                            }
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" valign="top">备注：@Model.CampaignBundle.Campaign.Remark</td>
                    </tr>
                </table>

            </td>
            <td width="280" align="right" valign="top">
                <img src="@Model.CampaignBundle.Campaign.ImageUrl" style="max-width:240px;">
            </td>
        </tr>
    </table>
</div>

<div class="divDotLine" style="margin-top: 20px; margin-left: 20px; margin-right: 20px;"></div>

<div style="margin-top:10px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <div style="padding:0px;">
                    <table width="100%" border="0" cellspacing="0" cellpadding="8">
                        <tr>
                            <td width="60">开始：</td>
                            <td width="150">
                                <input id="txtStartDate" class="input_16" onclick="laydate({format: 'YYYY-MM-DD'})">
                            </td>
                            <td width="60">结束：</td>
                            <td width="150">
                                <input id="txtEndDate" class="input_16" onclick="laydate({format: 'YYYY-MM-DD'})">
                            </td>
                            <td>
                                <span style=" margin-top:20px;">
                                    <input name="btnSearch" type="button" class="btn_blue" id="btnSearch" value="查询" onclick="loadDataAnalyse()" />
                                </span>
                            </td>
                            <td width="100" align="right">
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>

    </table>

</div>

<div id="dayChart" style="width: 100%; height: 400px; margin-top:20px;"></div>

<div class="divDotLine" style="margin-top: 20px; margin-left: 20px; margin-right: 20px;"></div>

<div id="approveStatusChart" style="width: 50%; height: 400px; margin-top:20px;"></div>

<div class="divDotLine" style="margin-top: 20px; margin-left: 20px; margin-right: 20px;"></div>


<div style="margin-top: 25px;">
    <div style="float: right;">
        <input name="btnRemove" type="button" class="btn_red" id="btnRemove" value="删 除" onclick="removeData()" />
    </div>
    <div style="float: left">
        @if (Model.CampaignBundle.Campaign.Status == Sheng.WeixinConstruction.Infrastructure.EnumCampaignStatus.Ongoing)
        {
            if (Model.CampaignBundle.PictureVote.AllowedNewItem)
            {
                <input name="btnAllowedNewItem" type="button" class="btn_blue" id="btnAllowedNewItem" value="关闭参与通道" onclick="closeNewItem()" />
            }
            else
            {
                <input name="btnAllowedNewItem" type="button" class="btn_blue" id="btnAllowedNewItem" value="打开参与通道" onclick="openNewItem()" />
            }

            <input name="btnModify" type="button" class="btn_blue" id="btnModify" value="编 辑" onclick="changePage('/Campaign/PictureVoteEidt')" />
            <input name="btnEnd" type="button" class="btn_red" id="btnEnd" value="结 束" onclick="endCampaign()" />
        }
    </div>
    <div style="clear: both"></div>
</div>


